<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>管理系统+</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <script type="text/javascript" src="/public.js"></script>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!--<script type="text/javascript" src="/js/user/time.js"></script>-->
    <script type="text/javascript" src="/js/user/userLogin.js"></script>
    <style type="text/css">
        a:link {
            color: #3b2e67;
            text-decoration: none;
        }

        a:visited {
            color: #66CCFF;
        }

        /*a:hover {*/
        /*color: #4876FF;*/
        /*text-decoration: underline;*/
        /*font-size: 22px;*/
        /*}*/

        a:active {
            color: #4B0082;
        }

        #logoTop tr td label {
            font-size: 12px;
            font-family: "微软雅黑";
        }
    </style>
</head>
<!--<%
request.getAttribute("currentUser");
request.getAttribute("sysUserRoles");
%>-->
<body class="easyui-layout">
<!-- 头部 -->
<!--<div data-options="region:'north',title:'欢迎使用',split:true" style="height: 75px;">-->
<div data-options="region:'north',title:'',split:false" style="height: 43px;">
    <div style="height: 40px;width: 100%;background-color:#F8F8FF;">
        <!-- 存放logo -->
        <!-- <img alt="" style="background-repeat: no-repeat;" src="" width="60%" height="45px"> -->
        <div style="float:right;height: 40px;width: 420px;background-color:#F8F8FF;">
            <!--<table id="logoTop" border="1px;" width="100%" style="float: right;">-->
            <table id="logoTop" border="0px;" width="100%" height="100%" style="float: right;">
                <tr>
                    <td align="right">
                        <img height="30%" alt="" src="/jquery-easyui-1.4.3/themes/metro/IconsExtension/user.png">
                        <label>
                            <!--登录人：<span th:text="${session.currentUser.name}">用户</span>-->
                            登录人：<span id="sub">请登录！</span>
                        </label>
                        &nbsp;
                        <!--<img height="50%" alt=""-->
                        <!--src="/jquery-easyui-1.4.3/themes/metro/IconsExtension/user_key.png">-->
                        <!--<label>-->
                        <!--角色：-->
                        <!--<span th:each="suRoles:${session.sysUserRoles}">-->
                        <!--<span th:text="${suRoles.name}">暂无角色</span>&nbsp;-->
                        <!--</span>-->
                        <!--</label>-->
                    </td>
                    <td>
                        <a href="javascript:void(0)" id="logoutId"
                           style="margin-left: 10%;color:#333333e6;font-weight: bold;">注销</a>
                    </td>
                </tr>
                <!--<tr>
                    <td>
                        <img alt="" src="/jquery-easyui-1.4.3/themes/metro/IconsExtension/flag_cn.png">
                        <label>日期：</label>
                        <label id="pDate"></label>
                        <a href="javascript:void(0)" id="logoutId"
                           style="margin-left: 10%;color:#333333e6;font-weight: bold;">注销</a>
                    </td>
                </tr>-->
            </table>
        </div>
    </div>
</div>
<!-- 底部 -->
<!-- <div data-options="region:'south',title:'底部 Title',split:true,collapsed:true" style="height: 100px;">
</div>-->
<!-- 右侧 -->
<!--<div data-options="region:'east',iconCls:'icon-reload',title:'右边',split:true,collapsed:true" style="width: 100px;">-->
<!--</div>-->
<!-- 左侧 -->
<div data-options="region:'west',title:'菜单',split:false" style="width: 220px;">
    <!-- 菜权限读取菜单 -->
    <ul id="menuTreeId" class="" style="margin: 10px 0px 0px 5px;"></ul>
</div>
<!-- 中部 -->
<div data-options="region:'center',title:''"
     style="padding: 5px; background: #eee;">
    <div class="easyui-tabs" fit="true" id="tabsId">
        <div title="首页"
             style="/* background-image: url('/pic/info.png'); */background-repeat: no-repeat;background-size:100% 100%;">
            <div align="center" style="padding-top: 10px;">
                <font color="red" size="2">欢迎使用EasyUi（Java后台版）</font>
                <font color="red" size="2">请使用IE9，谷歌，不支持IE低版本</font>
            </div>
            <!-- h5视频播放 -->
            <!-- <div align="left" style="margin-left: 20px;">
                <video id="qycId" width="400" height="280" controls="controls" loop="loop" autoplay="autoplay">
                    <source src="/file/mp4/qyc.mp4" type="video/mp4" />
                </video>
                <video id="hyId" width="400" height="280" controls="controls" />
                    <source src="/file/mp4/hy.mp4" type="video/mp4" />
                </video>
                <video id="hyId" width="400" height="280" controls="controls" />
                    <source src="/file/mp4/lyce.amr" type="video/mp4" />
                </video>
            </div> -->
            <div style="margin: 20px 0px 0px 20px;">
                <a href="#">在左侧布局或者底部布局，用来放信息，比如新闻什么，赞助商什么的，不至于首页空着</a>
            </div>
        </div>
    </div>
</div>
<!-- 绑定tab使用右键菜单的元素 -->
<div id="mm" class="easyui-menu" style="width: 120px;">
    <!--<div id="mm-tabclose" name="6">刷新</div>-->
    <div id="Div1" name="1">关闭</div>
    <div id="mm-tabcloseall" name="2">全部关闭</div>
    <div id="mm-tabcloseother" name="3">除此之外全部关闭</div>
    <div class="menu-sep"></div>
    <div id="mm-tabcloseright" name="4">当前页右侧全部关闭</div>
    <div id="mm-tabcloseleft" name="5">当前页左侧全部关闭</div>
</div>
</body>
<script type="text/javascript">
    $(function () {

        // 判断token
        if ($TokenUtil.getToken() == null || $TokenUtil.getToken() == undefined) {
            // $.messager.alert("提示", "请先登录用户", "", function () {
            //     window.location.href = $WEB_ROOT_PATH + "/";
            // });
            $TokenReUtil.reLogin();
            return false;
        }

        $("#sub").html($TokenUtil.getSub());

        var menus = [];
        $.ajaxSync($WEB_ROOT_PATH + '/menu/getCurrentMenu', 'post', {userName: $TokenUtil.getSub()}, function(res){
            if (res.code === 0) {
                menus = res.data;
            } else {
                $.messager.alert("提示", "菜单异常", "", function () {
                    //window.location.href = $WEB_ROOT_PATH + "/";
                });
            }
        },function(res){
            //console.log(res.responseJSON);
            $TokenReUtil.reLogin();
        },'json');

        // $.ajax({
        //     headers: {
        //         'tokenAz': $TokenUtil.getToken()
        //     },
        //     url: $WEB_ROOT_PATH + '/menu/getCurrentMenu',
        //     type: "post",
        //     async: false, // 同步
        //     dataType: "json",
        //     data: {userName: $TokenUtil.getSub()},
        //     success: function (res) {
        //         //console.log(res);
        //         if (res.code === 0) {
        //             menus = res.data;
        //         } else {
        //             $.messager.alert("提示", "菜单异常", "", function () {
        //                 //window.location.href = $WEB_ROOT_PATH + "/";
        //             });
        //         }
        //     }
        // });

        $("#menuTreeId").tree({ //tree菜单全部加载
            //url: $WEB_ROOT_PATH + '/menu/getCurrentMenu',
            data: menus,
            lines: true,
            animate: true,
            onLoadSuccess: function (node, data) {
                //console.log(data);
                if (data) {
                    $(data).each(function (index, d) {
                        /* 开发阶段取消$("#menuTreeId").tree("collapseAll", d.target); //折叠关闭所有
                        // 查找一个节点然后返回它
                        if (index == 0) { //默认展开第一个
                            var node = $('#menuTreeId').tree('find', d.id);
                            $("#menuTreeId").tree("expand", node.target);
                        } */
                    });
                }
            },
            onClick: function (node) { //打开tab
                if (node.url != "" && null != node.url) {
                    openTab(node.text, node.url, node.id);
                }
            }
        });

        // 新增Tab
        function openTab(text, url, menuId) {
            if ($("#tabsId").tabs('exists', text)) {
                $("#tabsId").tabs('select', text);
            } else {
                /* var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:100%' src="
                        + url + '?menuId='+menuId+"></iframe>"; */
                var content = "<iframe frameborder='0' scrolling='auto' style='width:100%;height:98%' src=" + $WEB_ROOT_PATH + url + "></iframe>";
                $("#tabsId").tabs('add', {
                    // todo:刷新
                    /*tools: [{ //刷新
                        iconCls: "icon-mini-refresh",
                        handler: function () {
                            //var currTab = self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
                            var currTab = $('#tabsId').tabs('getSelected'); //获得当前tab
                            //var index = $('#tabsId').tabs('getTabIndex',currTab);
                            //console.log(index);
                            refreshTab(currTab);
                        }
                    }],*/
                    title: text,
                    closable: true,
                    content: content
                });
            }
        }

        // $("#refId").click(function () { //刷新
        //     var currTab = self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
        //     refreshTab(currTab);
        // });

        //监听右键事件，创建右键菜单
        $('#tabsId').tabs({
            onContextMenu: function (e, title, index) {
                e.preventDefault();
                if (index > 0) {
                    $('#mm').menu('show', {
                        left: e.pageX,
                        top: e.pageY
                    }).data("tabTitle", title);
                }
            },
            onSelect:function(title,index){
                // $(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe")[0].contentWindow;
                //console.log($(".tabs-panels .panel").eq($('.tabs-selected').index()).find("iframe")[0].contentWindow);
                // resizeDT();
                return false;
            }
        });

        //右键菜单click
        $("#mm").menu({
            onClick: function (item) {
                closeTab(this, item.name);
            }
        });

        function closeTab(menu, type) {
            var allTabs = $("#tabsId").tabs('tabs');
            var allTabtitle = [];
            $.each(allTabs, function (i, n) {
                var opt = $(n).panel('options');
                if (opt.closable)
                    allTabtitle.push(opt.title);
            });
            var curTabTitle = $(menu).data("tabTitle");
            var curTabIndex = $("#tabsId").tabs("getTabIndex", $("#tabsId").tabs("getTab", curTabTitle));
            switch (type) {
                case "1"://关闭当前
                    $('#tabsId').tabs('close', curTabIndex);
                    return false;
                    break;
                case "2"://全部关闭
                    for (var i = 0; i < allTabtitle.length; i++) {
                        $('#tabsId').tabs('close', allTabtitle[i]);
                    }
                    break;
                case "3"://除此之外全部关闭
                    for (var i = 0; i < allTabtitle.length; i++) {
                        if (curTabTitle != allTabtitle[i])
                            $('#tabsId').tabs('close', allTabtitle[i]);
                    }
                    $('#tabsId').tabs('select', curTabTitle);
                    break;
                case "4"://当前侧面右边
                    for (var i = curTabIndex; i < allTabtitle.length; i++) {
                        $('#tabsId').tabs('close', allTabtitle[i]);
                    }
                    $('#tabsId').tabs('select', curTabTitle);
                    break;
                case "5": //当前侧面左边
                    for (var i = 0; i < curTabIndex - 1; i++) {
                        $('#tabsId').tabs('close', allTabtitle[i]);
                    }
                    $('#tabsId').tabs('select', curTabTitle);
                    break;
                /*case "6": //刷新
                    //var currTab = self.parent.$('#tabsId').tabs('getSelected'); //获得当前tab
                    var currTab = $('#tabsId').tabs('getSelected'); //获得当前tab
                    refreshTab(currTab);
                    break;*/
            }
        }

    });

    //刷新当前标签Tabs
    function refreshTab(currTab) {
        var url = $(currTab.panel('options').content).attr('src');
        $('#tabsId').tabs('update', {
            tab: currTab,
            //type: 'all',
            options: {
                href: url
            }
        });
    }

</script>
</html>
